import { Modal } from 'antd';
import { observer } from 'mobx-react';
import { Form, Input, Select, DatePicker, Button } from 'antd';
import { userStore } from '../../stores/UserStore';
import moment from 'moment';
import { settingStore } from '../../stores/SettingStore';

const { Option } = Select;

interface LoginModalProps {
    visible: boolean;
    cancle: Function;
}

export const EditModal = observer((props: LoginModalProps) => {
    const dateFormat = 'YYYY-MM-DD';
    return (
        <Modal title='编辑' visible={props.visible}
            width={400}
            footer={null}
            centered={true}
            onCancel={() => { props.cancle() }}
        >
            <Form
                name="normal_login"
                className="login-form edit-form"
                initialValues={{ remember: true }}
                onFinish={(v) => settingStore.editSetting(v)}
            >
                <Form.Item
                    name="username"
                    label="姓名"
                    initialValue={userStore.userInfo?.username}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    name="birthday"
                    label="生日">
                    <DatePicker placeholder="请输入你的生日" defaultValue={userStore.userInfo?.birthday ? moment(userStore.userInfo?.birthday, dateFormat) : undefined} />
                </Form.Item>

                <Form.Item
                    name="sex"
                    label="性别"
                    rules={[{ message: '请选择你的性别!' }]}
                >
                    <Select placeholder="请选择你的性别" defaultValue={userStore.userInfo?.sex}  >
                        <Option value="1">男</Option>
                        <Option value="0">女</Option>
                    </Select>
                </Form.Item>

                <Form.Item name='profile' label="简介" initialValue={userStore.userInfo?.profile}>
                    <Input.TextArea />
                </Form.Item>

                <Form.Item>
                    <Button htmlType="submit" className="login-form-button" >
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    );
})













